<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>服务日志</title>
    <meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="{$Think.config.RESOURCEURL}wx_assets/css/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <link href="{$Think.config.RESOURCEURL}wx_assets/service/css/services.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <script src="{$Think.config.RESOURCEURL}wx_assets/personCenter/js/mediaQuery.min.js{$Think.config.RESOURCE_VER}"></script>
    <script type='text/javascript' src='{$Think.config.RESOURCEURL}wx_assets/js/zepto.1.1.3.min.js{$Think.config.RESOURCE_VER}'></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.alert.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/util.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/wx_share.js{$Think.config.RESOURCE_VER}"></script>
</head>
<body>
<div class="mask"></div>
    <div class="menu">
        <span>服务类别</span>
        <i class="icon">&#xe600;</i>
    </div>
    <ul class="options" id="type">
        <li data-id="">所有</li>
        <volist name="type" id="types">
            <li data-id="{$types.id}">{$types.name}</li>
        </volist>
    </ul>
    <ul class="list" id="days">

    </ul>
</body>
<script type="text/html" id="Tpl">
    <%if(list){%>
    <%for(var i=0;i<list.length;i++){
    var day = list[i];
    %>
    <li class="clearfix">
        <div class="head">
            <img src="<%=day.headimgurl%>" alt="">
        </div>
        <div class="con">
            <span><%=day.nickname%></span>
            <p><%=day.content%></p>
            <%if(day.image){
                var image = day.image;%>
            <ul class="imgs clearfix">
                <%for(var j=0;j<image.length;j++){
                    var imgUrl = image[j];
                %>
                    <li>
                        <img onclick="days.showImgs(this)" data-url="<%=imgUrl%>" src="<%=imgUrl%>@100w_100h_1e_1c_100sh" alt="">
                    </li>
                <%}%>
            </ul>
            <%}%>
            <span style="margin-right:5px;float:left"><%=day.divisionName%></span><span><%=day.typeName%></span>
            <p class="time">
                <span><%=day.createTime%></span>
            </p>
        </div>
    </li>
    <%}}else{%>
        <div class="noMassage">暂无服务</div>
    <%}%>
</script>
<script>
    var url = "{$Think.config.SERVER_HOST}call.json?customerId={$customerId}";
    var days={
        pageSize:10,
        page:0,
        pageCount:0,
        h:$("ul.options").height(),
        display: false,
        init:function(){
            var me=this;
            this._initEvent();
            $.util.pageLoading.show();
            me._loadList(me.page,function(){
                $.util.pageLoading.hide();
            });
        },
        _initEvent:function(){
            var me=this;
            $.util.initDataLoading({
                me:days,
                lastChildren:function(){
                    return $("#days .clearfix:last");
                },
                page:function(){
                    return days.page;
                },
                pageCount:function(){
                    return days.pageCount;
                }
            });
            $("ul.options").hide();
            $("div.menu").click(function(){
                $("ul.options").show();
                days.display = !days.display;
                var height = days.display ? days.h : "0px";
                $("ul.options").height(height);
                $(".mask").fadeToggle();
                $(this).toggleClass("up");
            });
            $("ul.options li").click(function(){
                $(this).addClass("current").siblings(".current").removeClass("current");
                $(".mask").fadeOut();
                $("div.menu span").text($(this).text());
                $("div.menu").removeClass("up");
                $("ul.options").height(0);
                days.display = !days.display;
                days.page=0;
                var id = $(this).data("id");
                $.util.pageLoading.show("正在查询...");
                me._loadList(me.page,function(){
                    $.util.pageLoading.hide();
                });
            });
        },
        showImgs:function(ctl){
            window.event.stopPropagation();
            var imgs = new Array(0);
            $(ctl).parents("ul.imgs").find("li").each(function(){
                imgs.push($(this).find("img").data("url"));
            });
			var thisImg = $(ctl).data("url");
            wx_share.showImg(imgs,thisImg);
        },
        _renderList:function(data,page,callback){
            var me=this;
            if(data){
                var html=template("Tpl", data),
                        container = $("#days");
                if(page==0){
                    container.html(html);
                }else{
                    container.append(html);
                }
                me.page=page+days.pageSize;
                me.pageCount=data.total;
                callback && callback();
            }
        },
        _loadList:function(page,callback){
            var me=this;
            var typeId=$("#type li.current").data("id");
            var data={
                "typeId":typeId,
                "start":days.page,
                "limit":days.pageSize
            };
            $.ajax({
                type: 'post',
                url: url,
                dataType: 'json',
                data:{
                    'module':"services",
                    "method":"servicesMessageList",
                    "params":JSON.stringify(data)
                },
                success: function(data){
                    if(data){
                        me._renderList(data,page,callback);
                    }
                    $.util.pageLoading.hide();
                },
                error: function(xhr, type){
//            alert('Ajax error!')
                }
            })
        }
    }
    days.init();
</script>
<script>
    wx_share.init({
        "pkg":{
            "appId": '{$pkg.appId}',
            "timestamp": '{$pkg.timestamp}',
            "nonceStr": '{$pkg.nonceStr}',
            "signature": '{$pkg.signature}'
        },
        hide:1
    });
</script>
</html>